<template>
  <div>
    <h3>BBBBBB</h3>
    <p>{{ count }}</p>
    <p>{{ data.a }}</p>
    <p>{{ data.b }}</p>
    <button @click="update">按钮</button>
    <button @click="updateA">按钮</button>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  computed,
  watch,
  defineProps,
  defineEmits
} from "vue";
// 声明接受props
defineProps({
  age: String,
});

const count = ref(0);
const state = reactive({
  a: 1,
  b: 2,
});
const data = toRefs(state);
// 定义更新数据的方法
const update = () => {
  count.value++;
};

const updateA = () => {
  data.a.value++;
};
</script>

<style scoped></style>
